<template>
  <section class="ui">
    <div class="ui-wrap">
      <ul class="ui-menu">
        <li class="ui-menu-itet">基本样式</li>
        <router-link
          to="/" exact
          class="ui-menu-itec">样式统一<span class="ui-menu-subhead">Normalize</span>
        </router-link>
        <router-link
          to="/" exact
          class="ui-menu-itec">基础设置<span class="ui-menu-subhead">Base</span>
        </router-link>
        <router-link
          to="/" exact
          class="ui-menu-itec">打印样式<span class="ui-menu-subhead">Print</span>
        </router-link>
        <li class="ui-menu-itet">布局相关</li>
      </ul>
      <ul class="ui-main">
        <m-clipboard ref="clipboard"></m-clipboard>
        <li v-for="(v,k) in codeList"
          class="ui-main-ite">
          <h4 class="ui-main-til">{{(k+1)+'.'+v.codename}}</h4>
          <p class="ui-main-intr">{{v.codeintro}}</p>
          <div class="ui-main-show">
            <span v-on:click="copyCode(v.codecontent)"
              class="ui-main-copy">copy</span>
          </div>
          <div class="ui-main-code">
            <highlight-code
              v-bind:lang="codeType[v.codetype]">{{v.codecontent}}
            </highlight-code>
          </div>
        </li>
      </ul>
    </div>
  </section>
</template>

<script>
export default {
  name: 'home',
  data () {
    return {
      codeType: {
        '1': 'css',
        '2': 'html',
        '3': 'javascript'
      },
      codeList: []
    }
  },
  methods: {
    copyCode (text) {
      this.$refs.clipboard.copy(text)
    },
    getCodeList () {
      var that = this
      this.$http.post('http://localhost:3000/code/find', {}).then(res => {
        console.log(res, '成功')
        that.codeList = res.data
      }, res => {
        console.log(res, '失败')
      })
    }
  },
  created () {
    this.getCodeList()
  },
  mounted () {

  }
}
</script>


<style lang="less">
@import './ui.css';

</style>
